<template>
	<view class="home animation-fade">
		<view class="nameshow">
			<text class="good">hello 你好！</text>
			<text class="nametext">{{uname}}</text>
		</view>
		<!-- <button @tap="getuser">测试</button> -->
		
		<view class="topshow">
			<img class="leftshow" src="static/imgs/2.png" alt="" srcset="" />
			<view class="rightshow">
				<text class="t1">71kg</text>
				<text class="t2">2025年11月18号</text>
				<text class="t3">比上次测量1kg</text>
				<view class="dis">
					<text>目标体重55kg</text>
				</view>
			</view>
		</view>
		
		<view class="content">
				<view class="myitem">
					<text class="showtext">{{atitle}}</text>
					<text class="step">{{a}}</text>
				</view>
				<view class="myitem">
					<text class="showtext">{{btitle}}</text>
					<text class="step">{{b}}</text>
				</view>
				<view class="myitem">
					<text class="showtext">{{ctitle}}</text>
					<text class="step">{{c}}</text>
				</view>
				<view class="myitem">
					<text class="showtext">{{dtitle}}</text>
					<text class="step">{{d}}</text>
				</view>
		</view>
		
	</view>
</template>

<script>
	import uCharts from '../../lib/u-charts/u-charts.js'; //统计图
	import{getUsers} from '../../service/api/home.js'
   
	export default {
		data() {
			return {
				a:0,
				b:0,
				c:0,
				d:0,
				atitle:"跑步",
				btitle:"健步走",
				ctitle:"骑行",
				dtitle:"其他运动",
				uname:"Alison"
			}
		},
		mounted() {
			
			let uname = JSON.parse(uni.getStorageSync("setUserData")).username;
				this.uname = uname;
			
			
			console.log('aa')
			let arr = JSON.parse(uni.getStorageSync("runData"));
			if(arr){
					let res = arr;
					if(arr.filter(item=>item.id==1).length>0)
					this.a = arr.filter(item=>item.id==1)[0].num*1000;
					if(arr.filter(item=>item.id==2).length>0){
						this.b = arr.filter(item=>item.id==2)[0].num*1000;
					}
					if(arr.filter(item=>item.id==3).length>0)
					this.c = arr.filter(item=>item.id==3)[0].num*1000;
					if(arr.filter(item=>item.id==4).length>0)
					this.d = arr.filter(item=>item.id==4)[0].num*1000;
			}
		},
		methods: {
			async getuser(){
			  let res = 	await	getUsers();
			  console.log(res);
			}
		}
	}
</script>

<style scoped>
	.step{
		font-size: 80upx;
		margin-top: 20upx;
		margin-left: 100upx;
	}
.home{
	padding: 20upx;
	padding-top: 50px;
	background-color: #fefdf3;
	/* border: 1px solid; */
}
.nameshow{
	display: flex;
	flex-direction: column;
}
.good{
	font-size: 35upx;
	color: #849269;
}
 
 .nametext{
	 font-size: 70upx;
	 margin-top: 20upx;
 }
.topshow{
	width: 100%;
	height: 370upx;
	background-color: #d6e6b8;
	border-radius: 20upx;
	margin-top: 30upx;
}
	
.topshow img{
	width: 43%;
	margin-top: 28upx;
}
.leftshow{
	float: left;
}
.rightshow{
	display: flex;
	flex-direction: column;
	float: left;
	margin-left: 80upx;
	width: 300upx;
}
.t1{
	color: white;
	font-size: 60upx;
	margin-top: 30upx;
}
.t2{
	color: white;
	font-size: 30upx;
	margin-top: 20upx;
}
.t3{
	color: white;
	font-size: 30upx;
	margin-top: 60upx;
	padding-left: 60upx;
}
.dis{
	padding: 5upx;
	border-radius: 30upx;
	background-color: #9ec48d;
	text-align: center;
	margin-top: 28upx;
	color: white;
}
.content{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.content .myitem{
	width: 300upx;
	height: 300upx;
	border: 6upx solid #d0e3ae;
	margin-left: 35upx;
	border-radius: 40upx;
	margin-top: 25upx;
	padding-top: 10upx;
	display: flex;
	flex-direction: column;
}
.myitem .showtext{
	color: #034429;
	margin-left: 20upx;
	margin-top: 30upx;
	font-size: 30upx;
}

.swiperbox{
	margin-bottom: 32upx;
}
.tagb-content{
	font-size: 24upx; 
	margin-bottom: 10upx;
}

.tagb{
	font-size: 40upx;
	width: 40upx;
}
	
/*uCharts start*/
.charts{
	width: 400upx; 
	height:400upx;
	background-color:transparent;
	margin-top: 36upx;
}
/*uCharts end*/

.today_run{
	position: relative;
    left: 30px;
    top: -20px;
}
</style>